<ul class="breadcrumb">
    <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span>
    </li>
    <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
    <li class="active">Showcase</li>
</ul>
<div class="col_12" style="background-color: #B0C4DE ">


    <div class="col_12">
        <ul class="tabs left">
            <li><a href="#tabc1"><i class="icon-folder-open"></i>Ubicaci&oacute;n</a></li>
            <li><a href="#tabc2"><i class="icon-folder-open"></i>Precio</a></li>
            <li><a href="#tabc3"><i class="icon-folder-open"></i>Planimetr&iacute;a</a></li>
        </ul>

        <div id="tabc1" class="tab-content">
            <section class="center">
                <div class="col_12">    


                    <input type="button" name="frenteOk" id="frentOk" tabindex="1" value="OK">
                    &nbsp;&nbsp;&nbsp;Frentes:&nbsp;&nbsp;&nbsp;
                    <input type="button" name="popSi" id="popSi" tabindex="2" value="SI">                          



                </div>

                <div class="col_12">    

                    <fieldset style="background-color: #B0C4DE; border: 1px solid #519BE4;"> 
                        <input type="button" name="popSi" id="popSi" tabindex="3" value="SI">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;POP:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="button" name="popNo" id="popNo" tabindex="4" value="NO">
                    </fieldset>



                </div>

                <div class="col_12">    

                    <input type="button" name="calienteSi" id="calienteSi" tabindex="5" value="SI">
                    Zon Caliente:
                    <input type="button" name="calienteNo" id="calienteNo" tabindex="6" value="NO">                           


                </div>
                <div class="col_12">    

                    <fieldset style="background-color: #B0C4DE; border: 1px solid #519BE4;"> 
                        <input type="button" name="promocionSi" id="promocionSi" tabindex="7" value="SI">
                        &nbsp;&nbsp;Promoci&oacute;n:&nbsp;
                        <input type="button" name="promocionNo" id="promocionNo" tabindex="8" value="NO">
                    </fieldset>                          


                </div>

                <div class="col_12">    

                    <input type="button" name="exhibicionSi" id="exhibicionSi" tabindex="9" value="SI">
                    &nbsp;&nbsp;Exhibic&oacute;n:&nbsp;&nbsp;
                    <input type="button" name="exhibicionNo" id="exhibicionNo" tabindex="20" value="NO">


                </div>
                <div class="col_12">    


                    <h4>Radiobuttons Example</h4>

                    <div class="iphone-toggle-buttons">
                        <label for="radio-0"><input type="radio" name="radio-button-group-0" id="radio-0" checked="checked" /><span>radio 0</span></label>
                        <label for="radio-1"><input type="radio" name="radio-button-group-0" id="radio-1" /><span>radio 1</span></label>
                        <label for="radio-2"><input type="radio" name="radio-button-group-0" id="radio-2" /><span>radio 2</span></label>

                    </div>


                </div>
            </section>
        </div>

        <div id="tabc2" class="tab-content">
            <section id="sectionFamilia">
                <label for="seleccionFamilia">Familia:</label>
                <select id="seleccionFamilia" name="seleccionFamilia" tabindex="1" class="selmenu">
                    <option value="familia1">Familia 1</option>
                    <option value="familia2">Familia 2</option>
                    <option value="familia3">Familia 3</option>
                    <option value="familia4">Familia 4</option>
                </select>
            </section>
            <br/>

            <label for="articulo">Art&iacute;culo:</label>
            <input pattern="[a-zA-Z]*" type="text" name="articulo" id="articulo" placeholder="Art&iacute;culo" autocomplete="on" tabindex="2" class="txtinput">

            <br/>

            <div class="col_12">
                <div class="tab-pane active" id="table1">

                    <p>
                        Busqueda: <input id="filter" type="text"/>
                        Estado:
                        <select class="filter-status">
                            <option></option>
                            <option value="active">Active</option>
                            <option value="disabled">Disabled</option>
                            <option value="suspended">Suspended</option>
                        </select>
                        <a href="#clear" class="clear-filter" title="clear filter"><i class="icon-rss"></i>Limpiar</a>
                        <span class="row-count"></span>
                    </p>
                    <table class="table demo" data-filter="#filter" data-page-size="5">
                        <thead>
                            <tr>
                                <th data-toggle="true">
                                    C&oacute;digo
                                </th>
                                <th data-hide="phone">
                                    Nombre
                                </th>
                                <th data-hide="phone">
                                    Descripci&oacute;n
                                </th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">#1</a></td>
                                <td>Articul 1</td>
                                <td>Descip toda 1</td>


                            </tr>
                            <tr>
                                <td><a href="#">#2</a></td>
                                <td>Articul 2</td>
                                <td>Descip toda 2</td>
                            </tr>
                            <tr>
                                <td><a href="#">#3</a></td>
                                <td>Articul 3</td>
                                <td>Descip toda 3</td>
                            </tr>
                            <tr>
                                <td><a href="#">#4</a></td>
                                <td>Articul 4</td>
                                <td>Descip toda 4</td>

                            </tr>
                            <tr>
                                <td><a href="#">#5</a></td>
                                <td>Articul 5</td>
                                <td>Descip toda 5</td>
                            </tr>
                            <tr>
                                <td><a href="#">#6</a></td>
                                <td>Articul 6</td>
                                <td>Descip toda 6</td>
                            </tr>

                        </tbody>
                        <tfoot class="hide-if-no-paging">
                            <tr>
                                <td colspan="12">
                                    <div class="pagination pagination-centered"></div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>


                </div>
                Precio:
                <input pattern="[0-9]*" type="text" name="precio" id="precio" placeholder="Precio" autocomplete="on" tabindex="4" class="txtinput">


                <ul class="button-bar">
                    <li class="first">
                        <a href="#">
                            <i class="icon-caret-left"></i>
                        </a>
                    </li>
                    <li class="medium">
                        <label id ="lblRegistros">|<>|</label>
                    </li>
                    <li class="last">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                        </a>
                    </li>
                </ul>

            </div>
            <div class="col_12">
                <div class="col_6">
                    <div class="col_12">

                        <label for="conocimientoLogistica">ESTA:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="checkbox-0"><input type="checkbox" name="checkbox-0" id="checkbox-0" /><span>checkbox 0</span></label>
                        </div>
                    </div>
                    <br/>


                    <div class="col_12">

                        <input type="submit" name="ver" id="ver" class="blue" tabindex="7" value="VER">

                    </div>
                    <div class="col_12">
                        <label for="visible">Visible:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="visible"><input type="checkbox" name="visible" id="visible" /><span>visible</span></label>
                        </div>
                    </div>
                    <div class="col_12">
                        <input type="submit" name="registra" id="registra" class="blue" tabindex="7" value="Registra">
                    </div>
                    <div class="col_6">
                        <input id="txtMin" type="text" class="col_12"/>
                    </div>
                    <center> <div class="col_6"><label for="text4">DESC</label></div></center>
                    <div class="col_6">
                        <select class="col_12">
                            <option></option>
                            <option value="active">Active</option>
                            <option value="disabled">Disabled</option>
                            <option value="suspended">Suspended</option>
                        </select>
                    </div>
                </div>
                <div class="col_6">
                    <div class="col_4"><input type="button" class="blue" value="1"/></div>
                    <div class="col_4"><input type="button" class="blue" value="2"/></div>
                    <div class="col_4"><input type="button" class="blue" value="3"/></div>

                    <div class="col_4"><input type="button" class="blue" value="4"/></div>
                    <div class="col_4"><input type="button" class="blue" value="5"/></div>
                    <div class="col_4"><input type="button" class="blue" value="6"/></div>

                    <div class="col_4"><input type="button" class="blue" value="7"/></div>
                    <div class="col_4"><input type="button" class="blue" value="8"/></div>
                    <div class="col_4"><input type="button" class="blue" value="9"/></div>

                    <div class="col_4"><input type="button" class="blue" value="0"/></div>
                    <div class="col_8"><input type="button" class="blue" value="CL"/></div>

                </div>

                <!-- <div class="pagination pagination-centered"></div>-->
                <div class="col_12">
                    <center>
                        <ul class="button-bar">
                            <li class="first">
                                <a href="#">
                                    <input type="button" class="blue" value=" AGREGAR "/>
                                </a>
                            </li>
                            <li class="last">
                                <a href="#">
                                    <input type="button" class="blue" value=" ELIMINAR "/>
                                </a>
                            </li>
                        </ul>
                    </center>
                </div>
            </div> 
        </div>

        <div id="tabc3" class="tab-content">
            <div class="col_12">
                <textarea id="pregunta" name="pregunta" placeholder="Pregunta" tabindex="1"></textarea>
            </div>
            <div class="col_12">
                <input type="button" name="preguntaSi" id="preguntaSi" tabindex="2" value="SI">
                <ul class="button-bar">
                    <li class="first">
                        <a href="#">
                            <i class="icon-caret-left"></i>
                        </a>
                    </li>

                    <li class="last">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                        </a>
                    </li>
                </ul>
                <input type="button" name="prrguntanNo" id="prrguntanNo" tabindex="3" value="NO">



            </div>
            <div class="col_12">
                <div class="tab-pane active" id="table2">

                    <p>
                        Busqueda: <input id="filter" type="text"/>
                        Estado:
                        <select class="filter-status">
                            <option></option>
                            <option value="active">Active</option>
                            <option value="disabled">Disabled</option>
                            <option value="suspended">Suspended</option>
                        </select>
                        <a href="#clear" class="clear-filter" title="clear filter"><i class="icon-rss"></i>Limpiar</a>
                        <span class="row-count"></span>
                    </p>
                    <table class="table demo2" data-filter="#filter" data-page-size="5">
                        <thead>
                            <tr>
                                <th data-toggle="true">
                                    Directriz
                                </th>
                                <th data-toggle="true">
                                    Descripci&oacute;n
                                </th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">#1</a></td>
                                <td>Descip toda 1</td>


                            </tr>
                            <tr>
                                <td><a href="#">#2</a></td>
                                <td>Descip toda 2</td>
                            </tr>
                            <tr>
                                <td><a href="#">#3</a></td>
                                <td>Descip toda 3</td>
                            </tr>
                            <tr>
                                <td><a href="#">#4</a></td>
                                <td>Descip toda 4</td>

                            </tr>
                            <tr>
                                <td><a href="#">#5</a></td>
                                <td>Descip toda 5</td>
                            </tr>
                            <tr>
                                <td><a href="#">#6</a></td>
                                <td>Descip toda 6</td>
                            </tr>

                        </tbody>
                        <tfoot class="hide-if-no-paging">
                            <tr>
                                <td colspan="12">
                                    <div class="pagination pagination-centered"></div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>


                </div>
            </div>    


        </div>

    </div>